<template>
  <div>
    <el-table :data="userTable">
      <el-table-column property="userId" label="用户编号"></el-table-column>
      <el-table-column property="userName" label="用户姓名"></el-table-column>
      <el-table-column property="department" label="所属部门"></el-table-column>
      <el-table-column property="position" label="职务"></el-table-column>
      <el-table-column property="isConf" label="配置状态"></el-table-column>
      <el-table-column
        label="角色配置"
      >
        <template slot-scope="scope">
          <el-select v-model="scope.row.roleName" placeholder="请选择">
            <el-option
              v-for="item in roleInfo"
              :key="item.roleId"
              :label="item.roleName"
              :value="item.roleName">
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="确认">
        <template slot-scope="scope">
          <el-button type="success" @click="handleModify(scope.row)">确认</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import axios from 'axios'

  export default {
    name: "um-modify",
    data() {
      return {
        roleInfo: [],
        userTable: []
      }
    },
    methods: {
      getRoleInfo() {
        axios.get('/api/role/getAll').then(res => {
          if (res.data.status === '0') {
            console.log(res.data.msg)
          } else {
            this.roleInfo = res.data.result;
          }
        })
      },
      handleModify(user){
        this.$confirm('你确定要更改用户角色吗？','确认消息',{
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warring'
        }).then(()=>{
          axios.post('/api/users/modifyRole',{user}).then(res=>{
            if (res.data.status==='1'){
              this.$message({
                type: 'info',
                message: '已更改'
              })
            }else {
              this.$message({
                type: 'info',
                message: '更改错误'
              })
            }
          })
        }).catch(()=>{
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })

      }
    },
    mounted() {
      this.getRoleInfo();
      this.userTable = [this.$route.params.row]
    }
  }
</script>

<style scoped>

</style>
